<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
</head>
<body>
<div class="todo-app">
    <div class="title">胡淏然的Todo APP</div>
    <div class="todo-form">
        <input class="todo-input" type="text" placeholder="add to do"/>
        <div class="todo-buttom">Add to do</div>
    </div>
    <div class="item compliete">
      <div>
      <input type="checkbox">
      <span class="name">吃饭</span>
    </div>
      <div class="del">del</div>
    </div>
    <div class="item">
      <div>
      <input type="checkbox">
      <span class="name">吃饭</span>
    </div>
      <div class="del">del</div>
    </div>
    <div class="item">
      <div>
      <input type="checkbox">
      <span class="name">吃饭</span>
    </div>
      <div class="del">del</div>
    </div>
</div>
    <style>
      .compliete{
        text-decoration: line-through;
        opacity: 0.4;
      }
      .del{
        color: red;
      }
      .item{
        display: flex;
        align-items: center;
        justify-content: space-between;/*让框子里的元素自动平分空间*/
        box-sizing: border-box;
        width: 80%;
        height: 50px;
        margin: 8px auto;
        padding: 16px;
        border-radius: 20px;
        box-shadow:rgba(149,157,0,0.2)0px 8px 20px;
      }
      .todo-buttom{
        width: 100px;
        height: 52px;
        border-radius: 0 20px 20px 0;
        text-align: center;
        line-height: 52px;
        background:linear-gradient(
          to right,
          rgb(113,65,168),
          rgba(44,114,251,1)
        );
        cursor: pointer;
        user-select: none;
        color: #ffff;
      }
      .todo-input{
        margin-bottom: 20px;
        padding-left: 60px;
        border: 2px solid rgba(240, 233, 233, 0.304);
        outline: none;
        width:60%;
        height: 50px;
        border-radius: 20px 0 0 20px;
      }
      .todo-form{
    display: flex;
    margin-top: 20px;
    margin-left: 30px;
  }
  body {
            /* 设置从左到右的渐变背景色 */
            background: linear-gradient(to right, 
            purple, 
            blue)
  }
  .todo-app{
    width: 98%;
    height: 700px;
    border-radius: 5px;
    background-color: #ffff;/* 颜色可以用 单词、rgb数值、16进制来表示*/
    margin-top: 40px;
    margin-left: 1%;
    padding-top: 30px;/*这里是给白色方框加内边距*/
    box-sizing: border-box;
  }
  .title{
    font-size: 30px;
    font-weight: 900;
    text-align: center;
    margin-top: 30px;
  }
  
    </style>

</body>
</html>